<template>
	<view class="content">
		<view class="top">
			<image lazy-load="true" :src="topPoster" mode="widthFix" class="response"></image>
		</view>
		<view class="list">
			<view class="item" @click="toDoGuess(index)" v-for="(item, index) in cateData" :key="index">
				{{item.cateName}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topPoster: '',
				cateData: [],
				upCode: ''
			}
		},
		onLoad(options) {
			this.upCode = options.code; //推荐人信息
		},
		onShow() {
			this.getIndexData();
			this.VerifyLogin(this.upCode);//验证登录
		},
		methods: {
			getIndexData() { //获取首页初始化数据
				let opts = {
					url: 'index/getData',
					method: 'get'
				};
				let param = {};
				this.baseRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					this.cateData = rData.cateItemList;
					this.topPoster = rData.topPoster;
				}, error => {})
			},
			toDoGuess(index) {
				let cateId = this.cateData[index].id;
				// let opts = {
				// 	url: 'index/getIsAnswerOkByCateId/' + cateId,
				// 	method: 'get'
				// };
				// let param = {};
				// this.tokenRequest(opts, param).then(res => {
				// 	uni.hideLoading();
					uni.navigateTo({
						url: 'doGuess?cateId=' + cateId
					});
				// }, error => {})
			}
		}
	}
</script>

<style>
	.list {
		display: flex;
		width: 750rpx;
		flex-wrap: wrap;
	}

	.item {
		position: relative;
		text-align: center;
		width: 306rpx;
		margin-left: 15rpx;
		margin-top: 20rpx;
		background: linear-gradient(to bottom, #FF4E50, #F9D423);
		color: #fff;
		font-weight: 800;
		font-size: 36rpx;
		letter-spacing: 10rpx;
		padding: 25rpx;
		border-radius: 15rpx;
	}

	.item:active {
		top: 8rpx;
	}
</style>
